<template>
  <div class="container">

      <div class="header">
        <button class="btn-menu" @click="menuOpen" v-show="$store.state.is_origin_path"></button>
        <button class="btn-back" @click="backPreviousPage" v-show="!$store.state.is_origin_path"></button>>
        <h3>{{$store.state.header_title}}</h3>
      </div>

      <transition name="menu">
        <div class="aside" v-show="menu_open">
            <router-link class="btn-user" to="/login" v-if="!this.$store.state.login_data.isLogined">
                <img src="../images/icons/unknow.png" alt=""  @click="menuClose">
                <h6>用户</h6>
            </router-link>
            
            <router-link class="btn-user" to="/home" v-if="this.$store.state.login_data.isLogined">
                <img :src="$store.state.login_data.user_icon" alt=""  @click="menuClose">
                <h6>{{this.$store.state.login_data.user_name}}</h6>
            </router-link>

            <router-link class="btn" to="/gallery">
                <button class="gallery"  @click="menuClose"></button>                
                <span>
                    gallery
                </span>                
            </router-link>


            <router-link class="btn" to="/search">
                <button class="search"  @click="menuClose"></button>                
                <span>
                    search
                </span>                
            </router-link>

            <router-link class="btn" to="/post" v-if="$store.state.login_data.isLogined">
                <button class="post"  @click="menuClose"></button>                
                <span>
                    post
                </span>                
            </router-link>

            <button class="close"  @click="menuClose"></button>
            <div class="login-out"   @click="loginOut" v-if="this.$store.state.login_data.isLogined"><p>注销</p></div>  
        </div>
      </transition>
    
      <div class="content"  @click="menuClose">
          <transition name="content" mode="out-in">
              <router-view>
              </router-view>
          </transition>

      </div>
  </div>
</template>

<script>
    export default{
        data(){
            return {
                menu_open:false,
                header_title:'gallery',
                img_src:this.$store.state.login_data.user_icon
            }
        },
        mounted:function(){
            this.toHome();        
        },

        methods:{

            menuOpen(){
                this.menu_open=true;
            },

            menuClose(){
                this.menu_open=false;
            },
            toHome(){
                this.$router.push({path:'/gallery'})
            },
            loginOut(){
                this. menuClose();
                this.$cookies.set("user_name",'');
                this.$cookies.set("password",'');
                var user_data={
                    user_name:'',
                    password:'',
                    user_icon:this.$store.state.default_icon,
                };
                this.$store.commit('setIsLogin',user_data);
                this.$store.commit('golbalLoginOut');               
                this.$router.push({path:'/gallery'});
            },
            backPreviousPage(){
                this.$router.go(-1);
            }
                      

        }
    }
</script>


<style lang="scss" scoped>
    .container{

        .header{
            display: flex;
            width:100%;
            position: fixed;
            top:0px;
            background: black;
            margin-left: -2%;
            z-index: 1;
            button{
                margin-top: 2%;
                margin-bottom: 2%;
                margin-left:2%;
            }
            .btn-menu{
                width: 45px;
                height: 45px;
                background: url('../images/icons/menu-btn.png');
                background-size:45px 45px;
            }
            .btn-back{
                width: 45px;
                height: 40px;
                background: url('../images/icons/back-btn.png');
                background-size:45px 40px;                
            }

            h3{ 
                
                display: flex;
                margin-left: 25%;
                color:white;
                
            }
        }


     .menu-enter-active,.menu-leave-active{
         transition:all 0.5s;
     }
     .menu-enter,.menu-leave-to{
         margin-left: -20%;
     }
    //  .menu-enter-to,.menu-leave{
    //      margin-left:0px;
    //  }
     .content-enter-active,.content-leave-active{
         transition:all 0.5s;
     }
     .content-enter{
         opacity: 0;
        //  transform: translateX(100%);
     }

     .content-leave-to{
         opacity: 0;
        //  transform: translateX(-100%);
     }
    //  .content-enter-to,.content-leave{
    //      margin-top:0px;
    //  }
       
        .aside{
            width: 20%;
            height: 100%;
            background: black;
            position: fixed;
            left: 0px;
            top:0px;
            z-index: 2;
            padding-top: 10px;
            padding-left: 10px;

            img{
                
                width: 60px;
                height:60px;
                margin-left: 5px;
                margin-bottom: -20px;
                border-radius: 50px 50px;
            }
            h6{
                color: white;
                text-align: center;
            }

            .btn{
                display: flex;
                
                width: 100%;
                margin-top:40px;
                button{
                    border:0;
                }
                .gallery{
                    width: 20px;
                    height: 15px;
                    background: url('../images/icons/gallery-btn.png');
                    background-size:20px 15px;                    
                }

                .post{
                    width: 20px;
                    height: 15px;
                    background: url('../images/icons/post-btn.png');
                    background-size:20px 15px;                    
                }

                .search{
                    width: 20px;
                    height: 15px;
                    background: url('../images/icons/search-btn.png');
                    background-size:20px 15px;                    
                }

                span{
                    margin-left:5px; 
                    color: white;
                    font-size: 10px;                    
                }

            }

            .close{ 
                margin-top: 60px;
                margin-left: 15px;
                width: 30px;
                height: 30px;
                background: url('../images/icons/close-btn.png');
                background-size:30px 30px;  
            }

            .login-out{
                display: block;
                margin:190% auto 0 auto;
                text-align: center;
                color:white;
            }
        }

        .content{
            z-index: 1;
            margin-top: 70px;
        }

    }
</style>